Note to reviewers: This function is exactly the same that exists in core I'm just making it public because it is useful and needed outside the class.

Is there another way we can output these styles? The pattern of using id-based classnames and outputting additional style tags is something we're attempting to move away from in the style engine (#38167) and layout projects (#39336). Ideally it'd be great if we can reduce the amount we're relying on these approaches, as they're not covered by rendering in async contexts (e.g. the problems outlined in #35376)

I was wondering if it's possible for the styles for descendent blocks to somehow be output from the global styles sheet? I'm not too familiar with the work for this block support, but the idea of having the required styles available in the global style sheet is one of the things I'm exploring in the Layout block support refactor in: #40875

I'll also CC: @ramonjd for visibility here, since we've been discussing some of these concerns for future phases of the style engine lately 🙂

The pattern of using id-based classnames and outputting additional style tags is something we're attempting to move away from in the style engine

Thanks @andrewserong

It's not just about the style engine, but long-standing issues about the quality and sustainability of our styles output. Also refer to https://make.wordpress.org/core/2022/06/24/block-editor-styles-initiatives-and-goals/ for background.

Two of them are to rein in the specificity issues caused by random IDs and to construct more semantic classnames that theme authors can rely on.

Are the unique ids required to target elements with custom CSS, unique to that element? Or for specificity?

Maybe there's not a better way to achieve what you're trying to do right now, but it'd be useful to see if we can come up with an alternative that won't compound the style quality issues theme users are already dealing with.

I can picture getting a lot of blow back from things like this:

.wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h1, .wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h2, .wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h3, .wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h4, .wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h5, .wp-descendent-blocks-styles-efc4caf478f4320f17d3346c4bd8a6a5 h6 {
    color: green;
    font-size: 25px;
}

I was wondering if it's possible for the styles for descendent blocks to somehow be output from the global styles sheet?

I'm also wondering if theme.json/global styles is a logical home for this behaviour.

How will this interact with the current block supports mechanism?

If this data lives in the block's attributes, will there be any editor UI to control descendant styles from the parent block?

I'm imagining something like this in theme.json

	"styles": {
		"spacing": {
			"margin": "44px"
		},
		"blocks": {
			"core/columns": {
				"spacing": {
					"padding": "22px"
				},
				"blocks": {
					"core/social-links": {
						"color": {
							"background": "kermit-green"
						}
					}
				}
			}
		}
	},

That would be the recipe for the following CSS:

body {
    margin: 44px;
}
.wp-block-columns {
    padding: 22px;
}
.wp-block-columns .wp-block-social-links {
    background-color: kermit-green;
}

Sorry if I'm rehashing old ground and asking a lot of questions! Just trying to get context. 🙇